import React,{Component} from 'react'
import { Form, Input, Button,message } from 'antd';
import './register.css'

export default class loign extends Component{
    //设置用户名和密码的状态
    constructor(props){
        super(props);
        this.state = {
            userName: "",
            userPassword: "",
        }
    }
    //改变用户名的状态
    changeUsername(e){
        this.setState({
            userName:e.target.value
        })
    }
    //改变密码的状态
    changePassword(e){
        this.setState({
            userPassword:e.target.value
        })
    }
    //注册按钮，获取用户名和密码
    handleClick(){
        this.axios.post("/user/register",{
            usr:this.state.userName,
            pwd:this.state.userPassword
        }).then(res=>{
            if(res.data.code===200){
                message.success(res.data.msg);
                this.props.history.push("/login")
            }else{
                message.error(res.data.msg)
            }
        })
    }
    //去登录
    loginClick(){
        this.props.history.push("/login")
    }
    render(){
        return(
            <div className="register">
                <div className="registerForm">
                    <h1>用户注册</h1>
                    <Form
                        name="basic"
                    >
                        <Form.Item
                            name="userName"
                            rules={[{ required: true, message: '请输入账号！' }]}
                        >
                            <Input placeholder="账号" onChange={this.changeUsername.bind(this)}/>
                        </Form.Item>

                        <Form.Item
                            name="userPassword"
                            rules={[{ required: true, message: '请输入密码！' }]}
                        >
                            <Input.Password placeholder="密码" onChange={this.changePassword.bind(this)}/>
                        </Form.Item>

                        <Form.Item >
                            <Button
                                type="primary"
                                className="loginBtn"
                                onClick={this.handleClick.bind(this,this.state.userName,this.state.userPassword)}
                            >
                                注册
                            </Button>
                            <Button
                                type="text"
                                className="loginBtn"
                                onClick={this.loginClick.bind(this)}
                            >
                                去登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}